<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!--引入本地 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

		<style>
			.el-form-item {
				margin-bottom: 5px;
			}
		</style>
		<title>表号录入</title>
	</head>
	<body>
		<div id="app">
			<div class="topbox">
				<div class="top">
					<el-form :inline="false"  class="demo-form-inline">
						<el-form-item label="">
							<el-input v-model="where.name" placeholder="姓名"></el-input>
						</el-form-item>
						<el-form-item label="">
							<el-input v-model="where.sfzh"  placeholder="身份证号">
							</el-input>
						</el-form-item>

						<el-form-item label="">
							<el-input v-model="where.dh"  placeholder="电话">
							</el-input>
						</el-form-item>
						<el-form-item label="">
							<el-input v-model="where.xxdz"  placeholder="详细地址">
							</el-input>
						</el-form-item>

					</el-form>

					<!-- 按钮 -->
					<div class="btns">
						<button class="btn" @click="searchdata"><i class="el-icon-search"></i>查询</button>
						<button class="btn" @click="chongzhi"><i class="el-icon-refresh-right"></i>重置</button>
					</div>
				</div>
			</div>
			<!-- 表格 -->
			<div class="main" style="padding: 260px 10px 10px 10px;" >
				<div>
					<div class="card" v-for="(item,index) in listdata" >
						<div class="contents">
							<span>姓名：</span>
							<span>{{item.name}}</span>
						</div>
						<div class="contents" style="height: 59px;">
							<span>详细地址：</span>
							<span>{{item.xxdz}}</span>
						</div>
						<div class="contents">
							<span>电话：</span>
							<span>{{item.dh}}元</span>
						</div>
						<div class="contents" style="height: 49px;" >
							<span>卡片类型：</span>
							<span>
								<el-select v-model="listdata[index].kplx" placeholder="请选择" style="width: 100%;">
									<el-option v-for="item1 in kplx" :key="item1.id" :label="item1.kbmc" :value="item1.id">
									</el-option>
								</el-select>
							</span>
						</div>
						<div class="contents" style="height: 49px;">
							<span>价格类型：</span>
							<span>
								<el-select v-model="listdata[index].jglx" placeholder="请选择" style="width: 100%;">
									<el-option v-for="item1 in jglx" :key="item1.id" :label="item1.name" :value="item1.id">
									</el-option>
								</el-select>
							</span>
						</div>
						<div class="contents" style="height: 49px;" >
							<span>表具号：</span>
							<span><el-input v-model="listdata[index].bjh"  placeholder="表具号">
							</el-input></span>
						</div>
						<div class="contents" style="height: 49px;" >
							<span>购买量：</span>
							<span><el-input v-model="listdata[index].gml"  placeholder="购买量">
							</el-input></span>
						</div>


						<div class="contents" >
							<span></span>
							<span>
								<button class="btn" @click="updatedatav(listdata[index])">保存</button>
							</span>
						</div>
					</div>
				</div>
			</div>

		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				where: {},
				listdata:[],
				pageNumber:1,
				kplx:[],
				jglx:[],
			},
			created() {
				this.loadOptions();
			},
			methods: {
				chongzhi(){
					this.where = {};
				},
				async updatedatav(item){
					let index = loading(this);
					const res = await postWebCustom(getTableId("1932"),{kplx:item.kplx,jglx:item.jglx,bjh:item.bjh,gml:item.gml,khid:item.id});
					index.close();
					this.$message(res.msg);
				},
				async loadOptions(){
					let user = localStorage.getItem("user");
					let token = localStorage.getItem("token");
					if(user == null || user == undefined || token == null || token == undefined){
						window.location.href = "/admin/html/module/shuiwu/gongzhonghao/html/login.html";
					}else {
						const res = await listAdmin(getTableId("889"),"id",{});
						this.kplx = res.data.rows;
						const res1 = await listAdmin(getTableId("892"),"",{});
						this.jglx = res1.data;
					}
				},
				searchdata(){
					this.listdata = [];
					this.loadData();
				},
				nextPage(){
					this.pageNumber++;
					this.loadData();
				},
				async loadData () {
					const res = await postWebCustom(getTableId("1931"),this.where);
					this.listdata = res.data;
				}
			},

		})
	</script>
	<style type="text/css">
		body {
			margin: 0;
		}

		.topbox {
			width: 100%;
			position: fixed;
			z-index: 10;
			background-color: #fff;
		}

		.top {
			padding: 10px;
		}

		.startend {
			display: grid;
			grid-template-columns: repeat(1, 1fr 10px 1fr);
		}
		
		.startend div {
			width: 100%;
			overflow: hidden;
			border-right: 1px solid #DCDFE6;
			border-radius: 4px;
		}

		@media (min-width: 460px) {
			.startend div {
				border: none;
			}
		}

		.btns {
			display: flex;
			margin-top: 10px;
		}

		.btn {
			background-color: #409eff;
			color: #fff;
			margin-right: 10px;
			padding: 10px 30px;
			border: none;
			border-radius: 4px;
		}

		.main {
			padding: 110px 10px 10px 10px;
		}

		.card {
			border: 1px solid #eee;
			border-radius: 20px;
			padding: 10px;
			box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
			margin-bottom: 10px;
		}

		.contents {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(1, 80px 1fr);
		}

		.contents span {
			height: 40px;
			line-height: 40px;
			/* text-align: right; */
		}

		.contents a {
			text-decoration: none;
			color: #409eff;
		}
	</style>
</html>
